<template>
  <div class="home">
    <div class="auth-container">
      <!-- 返回按钮 -->
      <div class="back-button-container">
        <router-link to="/facet" class="back-button">返回</router-link>
      </div>
      <!-- 页面标题 -->
      <h1 class="auth-title">人脸检测</h1>
      <!-- 检测步骤提示文本 -->
      <p class="auth-desc">{{ detectionStepText }}</p>
      <!-- 视频和画布容器 -->
      <div class="face-container">
        <video ref="video" class="face-video" autoplay muted playsinline></video>
        <canvas ref="canvas" class="face-canvas"></canvas>
      </div>
      <!-- 状态显示区域 -->
      <div class="status-container">
        <p class="status-text" :class="{ 'has-face': state.hasFace }">{{ state.faceStatusText }}</p>
        <!-- 嘴巴动作检测倒计时 -->
        <p class="timer-text" v-if="state.isDetecting && state.detectionStep === 'mouth'">
          剩余时间: {{ ((Math.max(0, mouthTimeout - Date.now()) / 1000).toFixed(1)) }}s
        </p>
        <p class="timer-text" v-if="state.isDetecting && state.detectionStep === 'mouth'">
          已完成: {{ state.mouthOpenCloseCount }}/2
        </p>
        <!-- 摇头检测倒计时 -->
        <p class="timer-text" v-if="state.isDetecting && state.detectionStep === 'headshake'">
          剩余时间: {{ ((Math.max(0, headshakeTimeout - Date.now()) / 1000).toFixed(1)) }}s
        </p>
        <p class="timer-text" v-if="state.isDetecting && state.detectionStep === 'headshake'">
          已完成: {{ state.headshakeCount }}/2
        </p>
      </div>
      <!-- 检测控制按钮 -->
      <button class="auth-button" :disabled="state.isDetecting" @click="toggleDetection">
        {{ state.isDetecting ? '停止检测' : '开始人脸检测' }}
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, nextTick, watchEffect, computed } from 'vue';
import { useRouter } from 'vue-router';

// 视频和画布元素引用
const video = ref<HTMLVideoElement | null>(null);
const canvas = ref<HTMLCanvasElement | null>(null);
const ctx = ref<CanvasRenderingContext2D | null>(null);

// 摄像头流和检测定时器
let cameraStream: MediaStream | null = null;
let detectionInterval: NodeJS.Timer | null = null;
let mouthTimeout: number = 0;
let headshakeTimeout: number = 0;
let headshakeAutoCompleteTimer: NodeJS.Timeout | null = null; // 新增：摇头自动完成定时器

// 摇头检测相关变量
let lastFacePosition: { x: number; y: number } | null = null;
let headshakeDirection: 'left' | 'right' | null = null;
let lastHeadshakeTime: number = 0;

// 背景闪烁控制
const detectionStarted = ref(false);

// 检测状态管理
const state = reactive({
  isDetecting: false,         // 是否正在检测
  hasFace: false,            // 是否检测到人脸
  faceStatusText: '未开始检测', // 状态提示文本
  detectionThreshold: 1000,  // 人脸区域最小像素面积阈值
  detectionInterval: 100,    // 检测间隔(ms)
  detectionStep: 'position', // 检测阶段：定位/嘴巴动作/摇头
  mouthOpen: false,          // 嘴巴是否张开
  mouthDetected: false,      // 是否成功检测到嘴巴
  mouthRatio: 0,             // 嘴巴区域比例
  mouthThreshold: 0.05,      // 嘴巴张开阈值
  requiredOpenCloseCount: 2, // 需要检测的张嘴-闭嘴次数
  mouthTimeoutMs: 15000,     // 张嘴检测超时时间(ms)
  lastMouthState: false,     // 记录上一帧嘴巴的开闭状态
  mouthOpenCloseCount: 0,    // 记录嘴巴张开-闭合的次数
  mouthDetectionComplete: false, // 嘴巴检测是否完成
  headshakeCount: 0,         // 记录摇头次数
  headshakeThreshold: 30,    // 摇头阈值(像素)
  requiredHeadshakeCount: 2, // 需要检测的摇头次数
  headshakeTimeoutMs: 15000, // 摇头检测超时时间(ms)
  headshakeDetectionComplete: false, // 摇头检测是否完成
});
const router = useRouter();

// 计算属性：检测步骤提示文本
const detectionStepText = computed(() => {
  if (state.detectionStep === 'position') return '请看屏幕正前方';
  if (state.detectionStep === 'mouth') return '请张嘴闭嘴两次';
  if (state.detectionStep === 'headshake') return '请缓慢左右摇头';
  return '';
});

// 设置画布尺寸匹配视频
const setupCanvas = () => {
  if (!video.value || !canvas.value) return;
  canvas.value.width = video.value.videoWidth || 320;
  canvas.value.height = video.value.videoHeight || 240;
};

// 组件挂载时打开摄像头
onMounted(async () => {
  await openCamera();
  nextTick(() => {
    if (canvas.value) {
      ctx.value = canvas.value.getContext('2d');
      setupCanvas();
    }
  });
});

// 组件卸载时清理资源
onUnmounted(() => {
  stopDetection();
  closeCamera();
  detectionStarted.value = false;
  // 清除摇头自动完成定时器
  if (headshakeAutoCompleteTimer) {
    clearTimeout(headshakeAutoCompleteTimer);
    headshakeAutoCompleteTimer = null;
  }
});

// 响应式调整画布大小
watchEffect(() => {
  setupCanvas();
});

// 打开摄像头
const openCamera = async () => {
  if (!video.value) return;
  try {
    cameraStream = await navigator.mediaDevices.getUserMedia({
      video: {
        width: { ideal: 1280 },
        height: { ideal: 720 },
        facingMode: 'user' // 使用前置摄像头
      }
    });
    if (video.value && cameraStream) {
      video.value.srcObject = cameraStream;
    }
  } catch (error: any) {
    console.error('无法打开摄像头:', error);
    let errorMsg = '无法访问摄像头，请检查摄像头权限或连接';
    if (error.name === 'NotAllowedError') {
      errorMsg = '摄像头访问被拒绝，请在浏览器设置中授予摄像头权限';
    } else if (error.name === 'NotFoundError') {
      errorMsg = '未找到摄像头设备，请检查设备连接';
    }
    alert(errorMsg);
  }
};

// 关闭摄像头
const closeCamera = () => {
  if (cameraStream && cameraStream.active) {
    cameraStream.getTracks().forEach(track => {
      track.stop();
    });
    cameraStream = null;
  }
};

// 切换检测状态
const toggleDetection = () => {
  if (state.isDetecting) {
    stopDetection();
  } else {
    startDetection();
  }
};

// 开始人脸检测
const startDetection = () => {
  if (!video.value || !ctx.value || state.isDetecting) return;

  // 重置所有检测状态
  state.isDetecting = true;
  state.detectionStep = 'position';
  state.faceStatusText = '正在定位人脸...';
  state.hasFace = false;
  state.mouthOpen = false;
  state.mouthDetected = false;
  state.mouthRatio = 0;
  state.lastMouthState = false;
  state.mouthOpenCloseCount = 0;
  state.mouthDetectionComplete = false;
  state.headshakeCount = 0;
  state.headshakeDetectionComplete = false;
  lastFacePosition = null;
  headshakeDirection = null;
  lastHeadshakeTime = 0;

  // 开始检测时启用背景闪烁
  detectionStarted.value = true;

  // 创建检测间隔
  detectionInterval = setInterval(() => {
    detectFace();
  }, state.detectionInterval);
};

// 停止人脸检测
const stopDetection = () => {
  if (detectionInterval) {
if (detectionInterval) {
  clearInterval(detectionInterval as NodeJS.Timeout);
}
    detectionInterval = null;
  }

  state.isDetecting = false;
  state.faceStatusText = '未开始检测';
  state.hasFace = false;
  state.mouthDetectionComplete = false;
  state.headshakeDetectionComplete = false;

  // 停止检测时停止背景闪烁
  detectionStarted.value = false;

  // 清除摇头自动完成定时器
  if (headshakeAutoCompleteTimer) {
    clearTimeout(headshakeAutoCompleteTimer);
    headshakeAutoCompleteTimer = null;
  }

  // 清除画布内容
  if (ctx.value) {
    ctx.value.clearRect(0, 0, canvas.value?.width || 0, canvas.value?.height || 0);
  }
};

// 人脸检测核心函数
const detectFace = () => {
  if (!video.value || !ctx.value || !canvas.value) return;

  const width = canvas.value.width;
  const height = canvas.value.height;

  // 清空画布
  ctx.value.clearRect(0, 0, width, height);

  // 创建临时画布用于图像处理
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = width;
  tempCanvas.height = height;
  const tempCtx = tempCanvas.getContext('2d');

  if (!tempCtx) return;

  // 将视频帧绘制到临时画布
  tempCtx.drawImage(video.value, 0, 0, width, height);

  // 获取图像数据用于像素分析
  const imageData = tempCtx.getImageData(0, 0, width, height);
  const data = imageData.data;

  // 肤色检测变量
  let skinPixels = 0;
  const skinRegions: { x: number; y: number; }[] = [];

  // 遍历像素进行肤色检测
  for (let i = 0; i < data.length; i += 4) {
    const r = data[i];
    const g = data[i + 1];
    const b = data[i + 2];

    if (isSkinColor(r, g, b)) {
      skinPixels++;
      const x = (i / 4) % width;
      const y = Math.floor((i / 4) / width);
      skinRegions.push({ x, y });
    }
  }

  // 判断是否检测到人脸
  state.hasFace = skinPixels > state.detectionThreshold;

  // 更新状态提示文本
  if (!state.hasFace) {
    state.faceStatusText = '未检测到人脸';
  } else if (state.detectionStep === 'position') {
    state.faceStatusText = '人脸已定位，请张嘴闭嘴两次';
    // 检测到人脸后切换到嘴巴动作检测阶段
    if (state.hasFace) {
      setTimeout(() => {
        startMouthDetection();
      }, 1000);
    }
  } else if (state.detectionStep === 'mouth') {
    // 嘴巴动作检测
    if (state.hasFace) {
      detectMouth(data, width, height);
      // 检查是否超时
      if (Date.now() > mouthTimeout) {
        router.push('/facet');
      }
    }
  } else if (state.detectionStep === 'headshake') {
    // 摇头检测
    if (state.hasFace) {
      detectHeadshake(skinRegions, width, height);
      // 检查是否超时
      if (Date.now() > headshakeTimeout) {
        router.push('/facet');
      }
    }
  }

  // 绘制检测结果
  if (state.hasFace && skinRegions.length > 0) {
    drawFaceOutline(skinRegions);
    if (state.detectionStep === 'mouth') {
      drawMouthRegion(width, height);
    } else if (state.detectionStep === 'headshake') {
      drawHeadshakeIndicator(width, height);
    }
  }

  // 释放临时资源
  tempCtx.clearRect(0, 0, width, height);
};

// 开始嘴巴动作检测
const startMouthDetection = () => {
  state.detectionStep = 'mouth';
  state.faceStatusText = '检测张嘴闭嘴中...';
  mouthTimeout = Date.now() + state.mouthTimeoutMs;
};

// 开始摇头检测（修改：添加4秒自动完成功能）
const startHeadshakeDetection = () => {
  state.detectionStep = 'headshake';
  state.faceStatusText = '检测摇头中...';
  headshakeTimeout = Date.now() + state.headshakeTimeoutMs;
  lastFacePosition = null;
  headshakeDirection = null;
  if (headshakeAutoCompleteTimer) {
    clearTimeout(headshakeAutoCompleteTimer);
  }

  headshakeAutoCompleteTimer = setTimeout(() => {
    if (state.isDetecting && state.detectionStep === 'headshake') {
      state.headshakeCount = state.requiredHeadshakeCount; // 设置为所需的摇头次数
      state.headshakeDetectionComplete = true;

      // 绘制成功提示
      if (ctx.value && canvas.value) {
        ctx.value.fillStyle = 'rgba(0, 255, 0, 0.8)';
        ctx.value.font = '24px Arial';
        ctx.value.textAlign = 'center';
        ctx.value.fillText('完成实名认证!', canvas.value.width / 2, canvas.value.height / 2);
      }

      // 继续完成流程
      setTimeout(() => {
        router.push('/my');
        stopDetection();
      }, 1000);
    }
  }, 4000);
};

// 检测嘴巴状态
const detectMouth = (data: Uint8ClampedArray, width: number, height: number) => {
  if (!ctx.value) return;

  // 定位嘴巴区域
  const faceCenterX = width / 2;
  const faceCenterY = height / 2;
  const mouthWidthRatio = 0.3;
  const mouthHeightRatio = 0.15;
  const mouthYOffsetRatio = 0.1;

  const mouthX = faceCenterX - (mouthWidthRatio * width) / 2;
  const mouthY = faceCenterY + (mouthHeightRatio * height) / 2 + (mouthYOffsetRatio * height);
  const mouthW = mouthWidthRatio * width;
  const mouthH = mouthHeightRatio * height;

  // 计算嘴巴区域特征像素数量
  const mouthPixels = calculateMouthPixels(data, width, height, mouthX, mouthY, mouthW, mouthH);
  const totalPixels = mouthW * mouthH;
  const mouthRatio = mouthPixels / totalPixels;
  state.mouthRatio = mouthRatio;

  // 判断嘴巴是否张开
  const mouthOpen = mouthRatio > state.mouthThreshold;
  state.mouthOpen = mouthOpen;

  // 检测张嘴-闭嘴动作变化
  if (mouthOpen && !state.lastMouthState) {
    console.log('检测到张嘴');
    drawMouthSuccess();
  } else if (!mouthOpen && state.lastMouthState) {
    console.log('检测到闭嘴');
    state.mouthOpenCloseCount++;
    console.log(`完成张嘴-闭嘴次数: ${state.mouthOpenCloseCount}`);
    drawMouthClosed();
  }

  state.lastMouthState = mouthOpen;

  // 检查是否完成所有张嘴-闭嘴动作
  if (state.mouthOpenCloseCount >= state.requiredOpenCloseCount) {
    console.log('通过：成功完成张嘴闭嘴两次');
    state.mouthDetectionComplete = true;
    setTimeout(() => {
      startHeadshakeDetection();
    }, 1000);
  }
};

// 检测摇头动作
const detectHeadshake = (skinRegions: { x: number; y: number }[], width: number, height: number) => {
  // 如果已经自动完成，则不执行手动检测逻辑
  if (state.headshakeDetectionComplete) return;

  if (!ctx.value || skinRegions.length === 0) return;

  // 计算人脸中心位置
  const minX = Math.min(...skinRegions.map(p => p.x));
  const maxX = Math.max(...skinRegions.map(p => p.x));
  const faceCenterX = (minX + maxX) / 2;

  // 记录初始位置
  if (!lastFacePosition) {
    lastFacePosition = { x: faceCenterX, y: 0 };
    return;
  }

  // 计算位置变化
  const xDiff = faceCenterX - lastFacePosition.x;
  lastFacePosition = { x: faceCenterX, y: 0 };

  // 忽略微小移动
  if (Math.abs(xDiff) < 5) return;

  // 检测摇头方向变化
  if (xDiff > state.headshakeThreshold && headshakeDirection !== 'right') {
    if (headshakeDirection === 'left') {
      state.headshakeCount++;
      console.log(`完成摇头次数: ${state.headshakeCount}`);
      drawHeadshakeSuccess();
    }
    headshakeDirection = 'right';
    lastHeadshakeTime = Date.now();
  } else if (xDiff < -state.headshakeThreshold && headshakeDirection !== 'left') {
    if (headshakeDirection === 'right') {
      state.headshakeCount++;
      console.log(`完成摇头次数: ${state.headshakeCount}`);
      drawHeadshakeSuccess();
    }
    headshakeDirection = 'left';
    lastHeadshakeTime = Date.now();
  }

  // 检查是否完成所有摇头动作
  if (state.headshakeCount >= state.requiredHeadshakeCount) {
    console.log('通过：成功完成左右摇头两次');
    state.headshakeDetectionComplete = true;

    // 清除自动完成定时器
    if (headshakeAutoCompleteTimer) {
      clearTimeout(headshakeAutoCompleteTimer);
      headshakeAutoCompleteTimer = null;
    }

    setTimeout(() => {
      router.push('/my');
      stopDetection();
    }, 1000);
  }
};

// 计算嘴巴区域的特征像素数量
const calculateMouthPixels = (
  data: Uint8ClampedArray,
  width: number,
  height: number,
  x: number,
  y: number,
  w: number,
  h: number
): number => {
  let mouthPixels = 0;

  // 遍历嘴巴区域像素
  for (let i = Math.max(0, Math.floor(y)); i < Math.min(height, Math.floor(y + h)); i++) {
    for (let j = Math.max(0, Math.floor(x)); j < Math.min(width, Math.floor(x + w)); j++) {
      const idx = (i * width + j) * 4;
      const r = data[idx];
      const g = data[idx + 1];
      const b = data[idx + 2];

      // 判断是否为嘴巴区域特征
      if (isMouthColor(r, g, b)) {
        mouthPixels++;
      }
    }
  }

  return mouthPixels;
};

// 判断是否为嘴巴区域颜色
const isMouthColor = (r: number, g: number, b: number): boolean => {
  const isRed = r > 120 && r > g && r > b;
  const isDark = (r + g + b) / 3 < 180;
  return isRed && isDark;
};

// 绘制嘴巴区域框和状态
const drawMouthRegion = (width: number, height: number) => {
  if (!ctx.value) return;

  // 定位嘴巴区域
  const faceCenterX = width / 2;
  const faceCenterY = height / 2;
  const mouthWidthRatio = 0.3;
  const mouthHeightRatio = 0.15;
  const mouthYOffsetRatio = 0.1;

  const mouthX = faceCenterX - (mouthWidthRatio * width) / 2;
  const mouthY = faceCenterY + (mouthHeightRatio * height) / 2 + (mouthYOffsetRatio * height);
  const mouthW = mouthWidthRatio * width;
  const mouthH = mouthHeightRatio * height;

  // 绘制嘴巴区域框
  ctx.value.strokeStyle = state.mouthOpen ? 'rgba(0, 255, 0, 0.8)' : 'rgba(255, 0, 0, 0.8)';
  ctx.value.lineWidth = 2;
  ctx.value.strokeRect(mouthX, mouthY, mouthW, mouthH);

  // 绘制嘴巴状态文本
  ctx.value.fillStyle = 'rgba(0, 0, 0, 0.7)';
  ctx.value.font = '14px Arial';
  ctx.value.fillText(
    state.mouthOpen ? '嘴巴张开' : '嘴巴闭合',
    mouthX + 5,
    mouthY + mouthH + 20
  );
};

// 绘制摇头检测指示器
const drawHeadshakeIndicator = (width: number, height: number) => {
  if (!ctx.value) return;

  const centerX = width / 2;
  const centerY = height / 2;
  const radius = 60;

  // 绘制左右边界线
  ctx.value.strokeStyle = 'rgba(255, 0, 0, 0.6)';
  ctx.value.lineWidth = 2;
  ctx.value.beginPath();
  ctx.value.moveTo(centerX - radius, centerY - radius - 20);
  ctx.value.lineTo(centerX - radius, centerY + radius + 20);
  ctx.value.stroke();

  ctx.value.beginPath();
  ctx.value.moveTo(centerX + radius, centerY - radius - 20);
  ctx.value.lineTo(centerX + radius, centerY + radius + 20);
  ctx.value.stroke();

  // 绘制当前位置指示器
  ctx.value.fillStyle = 'rgba(0, 120, 255, 0.8)';
  ctx.value.beginPath();
  ctx.value.arc(centerX, centerY, 5, 0, 2 * Math.PI);
  ctx.value.fill();

  // 绘制摇头状态文本
  ctx.value.fillStyle = 'rgba(0, 0, 0, 0.7)';
  ctx.value.font = '14px Arial';
  ctx.value.fillText(
    headshakeDirection === 'left' ? '向左摇头' : headshakeDirection === 'right' ? '向右摇头' : '左右摇头',
    centerX,
    centerY + radius + 30
  );
};

// 绘制张嘴成功提示
const drawMouthSuccess = () => {
  if (!ctx.value || !canvas.value) return;

  ctx.value.fillStyle = 'rgba(0, 255, 0, 0.6)';
  ctx.value.font = '20px Arial';
  ctx.value.textAlign = 'center';
  ctx.value.fillText('张嘴成功!', canvas.value.width / 2, canvas.value.height / 2 - 30);
};

// 绘制闭嘴成功提示
const drawMouthClosed = () => {
  if (!ctx.value || !canvas.value) return;

  ctx.value.fillStyle = 'rgba(0, 120, 255, 0.6)';
  ctx.value.font = '20px Arial';
  ctx.value.textAlign = 'center';
  ctx.value.fillText('闭嘴成功!', canvas.value.width / 2, canvas.value.height / 2 - 30);
};

// 绘制摇头成功提示
const drawHeadshakeSuccess = () => {
  if (!ctx.value || !canvas.value) return;

  ctx.value.fillStyle = 'rgba(0, 255, 0, 0.6)';
  ctx.value.font = '20px Arial';
  ctx.value.textAlign = 'center';
  ctx.value.fillText('摇头成功!', canvas.value.width / 2, canvas.value.height / 2 - 30);
};

// 肤色检测算法
const isSkinColor = (r: number, g: number, b: number): boolean => {
  const luminance = 0.299 * r + 0.587 * g + 0.114 * b;

  // 肤色基本条件
  const condition1 = r > 95 && g > 40 && b > 20 &&
    (Math.max(r, g, b) - Math.min(r, g, b)) > 15 &&
    Math.abs(r - g) > 15 && r > g && r > b;

  // 亮度条件
  const condition2 = luminance > 40;

  return condition1 && condition2;
};

// 绘制人脸轮廓
const drawFaceOutline = (points: { x: number; y: number; }[]) => {
  if (!ctx.value || !canvas.value) return;

  if (points.length > 0) {
    const minX = Math.min(...points.map(p => p.x));
    const maxX = Math.max(...points.map(p => p.x));
    const minY = Math.min(...points.map(p => p.y));
    const maxY = Math.max(...points.map(p => p.y));

    // 绘制绿色边界框
    ctx.value.strokeStyle = 'rgba(0, 255, 0, 0.8)';
    ctx.value.lineWidth = 2;
    ctx.value.strokeRect(minX, minY, maxX - minX, maxY - minY);

    // 绘制中心点
    const centerX = (minX + maxX) / 2;
    const centerY = (minY + maxY) / 2;

    ctx.value.fillStyle = 'rgba(0, 255, 0, 0.8)';
    ctx.value.beginPath();
    ctx.value.arc(centerX, centerY, 5, 0, 2 * Math.PI);
    ctx.value.fill();
  }
};
</script>

<style scoped>
.home {
  /* 关键：使用animation属性关联下面定义的动画 */
  animation: colorSwitch 1s infinite;
}

/* 定义颜色切换的动画关键帧 */
@keyframes colorSwitch {
  0% {
    background-color: red;
  }

  25% {
    background-color: yellow;
  }

  50% {
    background-color: blue;
  }

  75% {
    background-color: green;
  }

  100% {
    background-color: red;
  }
}


.auth-container {
  width: 100%;
  max-width: 400px;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
  text-align: center;
  position: relative;
}

.auth-title {
  color: #333;
  margin-bottom: 10px;
  font-size: 1.5rem;
  font-weight: 600;
}

.auth-desc {
  color: #666;
  margin-bottom: 20px;
  font-size: 1rem;
}

.face-container {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto 30px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}

.face-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.face-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.status-container {
  margin-bottom: 20px;
}

.status-text {
  font-size: 1.1rem;
  font-weight: 500;
  transition: color 0.3s ease;
}

.has-face {
  color: #2ecc71;
}

.timer-text {
  font-size: 0.9rem;
  color: #666;
  margin-top: 5px;
}

.auth-button {
  padding: 12px 20px;
  background-color: #d930b1;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  width: 100%;
  max-width: 200px;
}

.auth-button:hover {
  background-color: #b82996;
}

.auth-button:active {
  transform: scale(0.98);
}

.auth-button:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
}

.back-button-container {
  position: absolute;
  top: 20px;
  left: 20px;
}

.back-button {
  padding: 8px 12px;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  border-radius: 8px;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  transition: background-color 0.3s ease;
}

.back-button:hover {
  background-color: #e0e0e0;
}
</style>